<template>
	<view class="">
		<u-navbar :placeholder="true">
			<view class="flexleft ssousuobox1" slot="left">
				<view class="margin_right2">
					<u-icon name="search" color="#999999" size="28"></u-icon>
				</view>
				<input type="text" placeholder="输入内容搜索" v-model="keywords" confirm-type="search"
					@confirm="getlistAll()">
			</view>
			<view class="ershiba xiaohei" slot="right" @click="getlistAll()">搜索</view>
		</u-navbar>
		<view class="tab_nav">
			<view class="navTitle" v-for="(item,index) in navList" :key="index">
				<view :class="{'active':myAllindex === index}" @click="checked(index)">
					{{item.title}}
				</view>
			</view>
		</view>
		<view class="" v-if="myAllindex == 0">
			<view class="flexbetween flex_wrap">
				<view class="videobox" v-for="item in myAll[0].list.data" :key="item.id" @click="shipin(item.id)">
					<image :src="item.video_url_text+'?x-oss-process=video/snapshot,t_10000,m_fast'" mode=""></image>
					<view class="videocontent">
						<view class="sanhang xiaobai ershil">{{item.des}}</view>
						<view class="flexbetween margin_top2">
							<view class="flexleft">
								<image class="plxtx" :src="item.videoyy.image_text" mode=""></image>
								<view class="strongtext xiaobai">{{item.videoyy.name}}</view>
							</view>
							<view class="flexright">
								<u-icon name="heart" color="#fff" size="12"></u-icon>
								<view class="strongtext xiaobai">{{item.dz_num}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mainpadding2" v-if="myAllindex == 1">
			<view class="margin_top flexbetween" v-for="item in myAll[1].list.data" :key="item.id" @click="jumpzhuye(item.id)">
				<view class="flexleft" style="width: 73%;">
					<image class="touxiang margin_right2" style="min-width: 52px;" :src="item.avatar_text" mode=""></image>
					<view class="">
						<view class="sanshier fonweight">{{item.nickname}}</view>
						<view class="xiankuan xiaohui strongtext margin_top1">粉丝：{{item.myfs_num}}</view>
						<view class="xiankuan xiaohui strongtext margin_top1">ID号：{{item.idno}}</view>
					</view>
				</view>
				<view class="dhbtn" v-if="item.is_gz==1" @click="cancelguanzhufn(item.id,item)">已关注</view>
				<!-- <view class="dhbtn">互相关注</view> -->
				<view class="dlbtn" v-if="item.is_gz==0 && user_id!=item.id" @click="guanzhufn(item.id,item)">关注</view>
				<!-- <view class="dlbtn">回关</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				myAllindex: 0,
				navList: [{
					index: 0,
					title: '视频'
				}, {
					index: 1,
					title: "用户"
				}],
				type: "",
				text: "",
				keywords: "描述",
				myAll: [{ //视频列表
						url: "/api/videocl/videoIndex",
						page: 1,
						list: {
							data: []
						}
					},
					{ //动态列表
						url: "/api/index/searchUser",
						page: 1,
						list: {
							data: []
						}
					},
				],
				user_id: ""
			}
		},
		onLoad(options) {
			if (options.text) {
				this.keywords = options.text
			}
			this.getlistAll()
		},
		onShow() {
			this.user_id = uni.getStorageSync("user_id")
		},
		methods: {
			shipin(id,userid){
				uni.navigateTo({
					url: "/pages_homepage/shipin/shipin?ly=1&id="+id+"&userid="+userid
				})
			},
			getlistAll() {
				if(this.keywords==""){
					httpRequest.toast("请输入搜索内容")
					return false
				}
				this.myAll.forEach((item, index) => {
					if (item.url) {
						this.init(index)
					}
				})
			},
			guanzhufn(b_user_id, item) {
				httpRequest.request('/api/user/clUserGz', 'GET', {
					b_user_id
				}).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						item.is_gz = 1
					}
				})
			},
			cancelguanzhufn(b_user_id, item) {
				httpRequest.request('/api/user/clUserGz', 'GET', {
					b_user_id
				}).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						item.is_gz = 0
					}
				})
			},
			init(index, isPage, page) {
				let _this = this
				let url = this.myAll[index].url
				let data = {
					page: this.myAll[index].page || 1,
					limit: 12,
					keywords: this.keywords
				}
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = this.myAll[index].list;
						if (isPage == true) {
							this.myAll[index].list.data = dataList.data.concat(resList.data);
						} else {
							this.myAll[index].list = res.data
							this.myAll[index].list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.myAll[this.myAllindex].list;
				let page = _this.myAll[this.myAllindex].page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.myAll[this.myAllindex].page = page;
				_this.init(this.myAllindex, true, page);
			},
			checked(index) {
				if (index == this.myAllindex) {
					return false
				}
				this.myAllindex = index
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 视频盒子样式
	.plxtx {
		width: 40rpx !important;
		height: 40rpx !important;
		min-width: 40rpx !important;
		min-height: 40rpx !important;
		border-radius: 50%;
		position: inherit !important;
		margin-right: 5rpx;
	}

	.videobox {
		position: relative;
		width: 49.6%;
		height: 500rpx;
		margin-top: 5rpx;

		image {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.videocontent {
			bottom: 0;
			left: 0;
			position: absolute;
			padding: 10rpx;
		}
	}

	// 视频盒子样式结束
	.ssousuobox1 {
		background: #F5F5F5;
		width: 100%;
		border-radius: 36rpx;
		padding: 10rpx 30rpx;
	}

	.dlbtn {
		background: #2361FF;
		border-radius: 44rpx;
		padding: 16rpx 40rpx;
		color: #fff;
		font-size: 24rpx;
	}

	.dhbtn {
		background: #F5F5F5;
		border-radius: 44rpx;
		padding: 16rpx 40rpx;
	}

	.touxiang {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.tab_nav {
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 30rpx 30rpx;
	}

	.tab_nav .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #999999;
	}

	.active {
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
		position: relative;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 36rpx;
		height: 6rpx;
		background: #2361FF;
		border-radius: 3rpx;
		background-size: 100% 100%;
		left: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		margin: auto;
	}
</style>